<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
	<head th:replace="_fragments :: head(~{::title})">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>博客页面</title>
		<link rel="stylesheet" href="../static/css/bootstrap.min.css"/>
		<style>
			/* footer元素设置 */
			footer div .row {
				margin-bottom: 0.625rem;
				height: 6.25rem;
			}
			footer div .row [class*="col-md-3"] {
				height: 100px;
				margin-top: 1.875rem;
				text-align: center;
				border-right: 1px solid #122B40;
			}
		</style>
	</head>
	<body>
	<!--导航栏-->
	<nav th:replace="_fragments :: nav" class="navbar navbar-inverse navbar-static-top" role="navagation">
		<div class="container">
			<!-- logo -->
			<div class="navbar-header">
				<a href="#" class="navbar-brand">SJZD</a>
			</div>
			<div id="navbar" class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
					<li ><a href="#"><i class="glyphicon glyphicon-home"></i>&nbsp;首页</a></li>
					<li ><a href="#"><i class="glyphicon glyphicon-bell"></i>&nbsp;分类</a></li>
					<li ><a href="#"><i class="glyphicon glyphicon-tags"></i>&nbsp;标签</a></li>
					<li ><a href="#"><i class="glyphicon glyphicon-book"></i>&nbsp;归档</a></li>
					<li ><a href="#"><i class="glyphicon glyphicon-user"></i>&nbsp;关于我</a></li>
				</ul>
				<form class="navbar-form navbar-right" role="search" target="_blank" method="post" action="#">
					<div class="input-group">
						<input type="text" class="form-control" placeholder="Search" name="query">
						<span class="input-group-btn">
						<button type="submit" class="btn btn-default">
							<span class="glyphicon glyphicon-search" aria-hidden="true"></span>搜索
						</button>
					</span>
					</div>
				</form>
			</div>
		</div>
	</nav>
	
	<!-- 中间内容-->
	<div class="panel panel-default" style="padding-top: 3.125rem ; padding-bottom: 12.5rem;">
		<div class="container" style="width: 60%;">
			<div class="panel panel-default">
				<div class="panel-heading text-center">
					<h4>归档</h4><strong>共 <span style="color: red;" th:text="${count}">14</span>篇</strong>
				</div>
			</div>

			<div class="panel panel-default" style="margin-top: 6.25rem;" th:each="item : ${archivesMap}">
				<div class="panel-heading text-center">
					<h4 th:text="${item.key}">2018</h4>
				</div>
				<ul class="list-group">
					<li class="list-group-item" style="height: 40px" th:each="blog : ${item.value}">
						<div class="row">
							<div class="col-md-4">
								<a th:text="${blog.title}" target="_blank" th:href="@{/blog/{id}(id=${blog.id})}">Cras justo odio</a>
							</div>
							<div class="col-md-4">
								<span class="label label-primary" th:text="${blog.updateTime}">11月12日</span>
							</div>
							<div class="col-md-4 text-right">
								<span class="label label-danger"  th:text="${blog.flag}">Danger</span>
							</div>
						</div>
					</li>
					<!--/*-->
					<li class="list-group-item">
						<a>Cras justo odio</a>
						<span class="label label-success">2018-12-12</span>
						<span class="label label-danger">Danger</span>
					</li><li class="list-group-item">
						<a>Cras justo odio</a>
						<span class="label label-success">2018-12-12</span>
						<span class="label label-danger">Danger</span>
					</li>
					<li class="list-group-item">
						<a>Cras justo odio</a>
						<span class="label label-success">2018-12-12</span>
						<span class="label label-danger">Danger</span>
					</li>
					<!--*/-->
				</ul>
			</div>
		</div>
	</div>
	
	<!-- 底部 -->
	<footer th:replace="_fragments :: footer" class="footer navbar-default navbar-static-bottom" >
		<div class="container-fluid" style="background-color: #3C763D;height: 200px;">
			<div class="row" style="height: 60%">
				<div class="col-md-3"><img src="../static/img/QR-code.jpg"  th:src="@{/img/QR-code.jpg}" class="img-rounded" height="80px" width="80px"></div>
				<div class="col-md-3" id="footer-freshBlogs-container">
					<div th:fragment="footer-fresh-div" >
						<strong>最新博客</strong>
						<div th:each="blog : ${blogs}">
							<a href="#" style="color: #0C1021" th:href="@{/blog/{id}(id=${blog.id})}" th:text="${blog.title}">Dapibus ac facilisis in</a>
						</div>
						<!--/*-->
						<div>
							<a href="#">Morbi leo risus</a>
						</div>
						<div>
							<a href="#">Vestibulum at eros</a>
						</div>
						<!--*/-->
					</div>
				</div>
				<div class="col-md-3">
					<address>
						<strong>联系我</strong><br>
						<p>
							邮箱: <span th:text="#{footer.email}">121@136.com</span><br>
							QQ: <span th:text="#{footer.qq}">666666666</span><br>
							QQ群: <span th:text="#{footer.qqGroup}">666666666</span>
						</p>
					</address>
				</div>
				<div class="col-md-3">
					<strong>SJZD</strong><br>
					<p th:text="#{footer.introduce}">一个简易的博客</p>
				</div>
			</div>
			<div class="text-center" style="border-top: black 1px solid; width: 100%;">
				<div style="margin-top: 20px">
					<strong>Copyright &copy; 2019 - 2050 SJZD designed at CQUT</strong>
				</div>
			</div>
		</div>
	</footer>
	<!--/*/<th:block th:replace="_fragments :: script">/*/-->
	<script type="text/javascript" src="../static/jquery/jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="../static/js/bootstrap.min.js"></script>
	<!--/*/</th:block>/*/-->
	</body>
</html>